<template>
    <el-dialog
        :title="`通道列表(${activeDevice.name})`"
        width="800px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        append-to-body
        @close="closeAction"
        :visible="visible"
    >
        <el-button type="green" @click="newAction"
            ><i class="iconfont icon-add"></i> 新增</el-button
        >
        <el-table
            :data="dataList"
            class="mt-10"
            style="width: 100%"
            v-loading="loading"
        >
            <el-table-column prop="channel" label="通道号"></el-table-column>
            <el-table-column
                prop="channelCode"
                label="安工院通道号"
            ></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <el-button
                            type="primary"
                            @click="editAction(scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="danger"
                            @click="deleteAction(scope.row)"
                        >
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            :title="newModalTitle"
            width="500px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
            :visible.sync="newModalVisible"
            v-if="newModalVisible"
        >
            <el-form ref="newForm" :model="newForm" label-width="150px">
                <el-form-item
                    label="通道号："
                    prop="channel"
                    :rules="[
                        {
                            required: true,
                            message: '请输入通道号',
                            trigger: 'change',
                        },
                    ]"
                >
                    <el-input
                        placeholder="请输入"
                        v-model.trim="newForm.channel"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="安工院通道编码："
                    prop="channelCode"
                    :rules="[
                        {
                            required: true,
                            message: '请输入安工院通道编码',
                            trigger: 'change',
                        },
                    ]"
                >
                    <el-input
                        placeholder="请输入"
                        v-model.trim="newForm.channelCode"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="cancel" @click="newModalVisible = false"
                    >取消</el-button
                >
                <el-button
                    type="primary"
                    :loading="adding"
                    @click="submitAction"
                    >确定</el-button
                >
            </div>
        </el-dialog>
    </el-dialog>
</template>

<script>
import { mapState } from "vuex"
import utils from "@/assets/js/utils"
import UltrasonicNew from "@/components/equipment/UltrasonicNew.vue"
export default {
    name: "Group",
    components: {
        UltrasonicNew,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
        visible: {
            type: Boolean,
        },
        activeDevice: {
            type: Object,
            required: true,
        },
        deviceClassify: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            loading: false,
            filterForm: {
                number: "",
                name: "",
                currentstate: "",
            },
            dataList: [],
            newModalVisible: false,
            newModalTitle: "",
            newForm: {},
            adding: false,
            deleting: false,
        }
    },
    created() {
        this.getData()
    },
    methods: {
        closeAction() {
            this.$emit("update:visible", false)
        },

        getData() {
            this.loading = TraceVue
            this.$get("/fireFightingIOT/device/deviceChannelList", {
                deviceId: this.activeDevice.id,
            }).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.dataList = data
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        newAction() {
            this.newModalVisible = true
            this.newModalTitle = "新增通道"
            this.newForm = {}
        },
        editAction(item) {
            const { channel, channelCode, id, deviceId } = item
            this.newForm = { channel, channelCode, id, deviceId }
            this.newModalVisible = true
            this.newModalTitle = "编辑通道"
        },
        submitAction() {
            this.$refs["newForm"].validate((valid) => {
                if (valid) {
                    this.adding = true
                    if (!this.newForm.deviceId) {
                        this.newForm.deviceId = this.activeDevice.id
                    }
                    let url = "/fireFightingIOT/device/deviceChannelAddOrUpdate"
                    this.$ajax({
                        url: url,
                        method: "post",
                        data: this.newForm,
                    }).then(
                        (data) => {
                            this.adding = false
                            this.$message.success("保存成功")
                            this.getData()
                            this.newModalVisible = false
                        },
                        (error) => {
                            this.adding = false
                            this.$message.error(error.msg)
                        }
                    )
                }
            })
        },

        deleteAction(item) {
            this.showConfirm("确定删除该通道吗？", () => {
                this.deleting = true
                this.$post("/fireFightingIOT/device/deviceChannelDel", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.getData()
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
}
</script>
